<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style>
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #1FCA23;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 8.0rem;
      height: 2.2rem;
      line-height: 2.2rem;
      /* float: left;
      margin-left: 30%; */
      color: #fff;
      font-size: 16px;
      text-align: center;
      margin-left: calc(50% - 1.5rem - 4rem);
    }
    /*修改内容区背景色*/
    body{
      background-color:#fff;
    }
    .menu{
      width: 100%;
      height:2.2rem;
      background-color:#fff;
      border-bottom: 1px solid #ededee;
      font-size: 14px;
      float: top;
      z-index: 300;
      position: relative;
      top:2.21rem;
    }
    .menu ul{
      margin:0;
      padding: 0;
    }
    .menu ul li{
      width: 33.3%;
      height:2.2rem;
      line-height: 2.2rem;
      float: left;
      text-align: center;
      font-size: 16px;
    }
    .menu ul .cur{
       color:#1FCA23;
       border-bottom:2px solid #1FCA23;
    }
    #main{
       position:absolute;
       top:2.62rem;
    }
    .study_main{
      width: 100%;
      height: auto;
      float: left;
    }
    .study_main ul{
      margin:0;
      padding:0;
      display: none;
    }
    .study_main ul li{
      padding:0.5rem 0.5rem 0 1.2rem;
      border-bottom: 1px solid #ededee;
      position: relative;
    }
    .main_items{
      font-size: 14px;
    }
    .study_main ul li p{
      font-size: 12px;
      color: gray;
    }
    .main_icon{
      width: 2.0rem;
      position: absolute;
      top:1.1rem;
      right: 0;
    }
    .main_icon img{
      display: block;
      width: 100%;
    }
    .main-title{
      width: 2.8rem;
      position: absolute;
      font-size: 14px;
      font-weight:600;
      top:1.55rem;
      right: 1.1rem;
    }
 
  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <header class="bar bar-nav">
         <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
         <span id="pull-title">我的订单</span>
      </header>

      <!-- 页面内容区域 -->
       <div class="menu">
            <ul>
               <li class="cur" id="allpaid">全部</li>
               <li id="unpaid">待付款</li>
               <li id="paid">已付款</li>
            </ul>
        </div>
        <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" id="main">
          <div class="list-block" id="li_block">
              <div class="study_main">
                   <ul class="list-container" style="display: block;">
                   </ul>
                   <ul class="list-container">
                   </ul>
                   <ul class="list-container" >
                   </ul>
              </div>
          </div>
          
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader" id="placeholder">
              <div class="preloader"></div>
          </div>
      </div>
    
          <!-- <li>
             <h5 style="margin:0;">英语小学三年级&emsp;第一课</h5>
             <div class="main_items">
               <span>实付款：&nbsp;￥29.90</span>
             </div>
             <p>付款时间：2018.09.24&nbsp;12:00:00</p>
             <div class="main-title" style="color: #1FCA23;">去学习</div>
             <div class="main_icon">
                 <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
             </div>
          </li> -->

    </div>
  </div>

  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">

      // 加载flag
      var loading = false;
      var offset = 0;
      var limit = 10;
      var lastlength = 10;
      var datalist = new Array();
      var ordertype = 0;
      var isdeletebottom = false;

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {

          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          // setTimeout(function() {
          //     // 重置加载flag
              
          //     console.log('================'+lastlength + '====' + limit);


              if (lastlength < limit) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  isdeletebottom = true;
                  // 删除加载提示符
                  // $('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = datalist.length;
               getData();
              // 添加新条目
              // addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          // }, 1000);
      });

   // 点击返回
   function backclick(){
     native_goto('local/finish');
   }

   function readclick(){
      // 点击菜单让其对应内容显示或隐藏
      $$('.menu ul li').click(function(){
        $$('.menu ul li').eq($$(this).index()).addClass("cur").siblings().removeClass("cur");
        $$('.study_main ul').hide().eq($$(this).index()).show();
        ordertype = $$(this).index();
        if(isdeletebottom){
          isdeletebottom = false;
          $$("#main").append('<div class="infinite-scroll-preloader" id="placeholder"><div class="preloader"></div></div>');

          $.attachInfiniteScroll($('.infinite-scroll'))
        }
        offset = 0;
        getData();
      })
   }


  // 遍历数据 页面内容    
  function getData(){
    var param = {}
    var url = 'api/v1/orders?search=user_id:'+curuserid+'&offset='+offset+'&limit='+limit;
    if(ordertype == 1){//未付款
      url = 'api/v1/orders?search=status:0;user_id:'+curuserid+'&searchJoin=and&offset='+offset+'&limit='+limit;
    }else if(ordertype == 2){//已付款
      url = 'api/v1/orders?search=status:1;user_id:'+curuserid+'&searchJoin=and&offset='+offset+'&limit='+limit;
    }else{//全部
      url = 'api/v1/orders?search=user_id:'+curuserid+'&offset='+offset+'&limit='+limit;
    }

    net_request('get',url,param,successCallBack,errorCallBack);
  }

  //成功函数回调 页面
  function successCallBack(data){
    // alert(JSON.stringify(data));
    loading = false;
    if (isNotNull(data) && data.success) {
      var databody = data.data;
      if (offset == 0) {
        datalist = new Array();
      }
      if (isNotNull(databody)) {
         var list = databody.list;
         var html = '';
         if (isNotNull(list)) {
           
           lastlength = list.length;
           for (var i = 0; i < list.length; i++) {
              var item = list[i];
              datalist.push(item);
           }
            for (var i = 0; i < datalist.length; i++) {
                var item = datalist[i];

                if (isNotNull(item)) {
                    var status = item.status;
                    // var strright = '<img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">';
                    var strright = '';
                    // var strstatus = "<font color='#f00b0d'>去支付</font>";
                    var strstatus = "";
                    if (Number(status) == 1)  {

                        // strstatus = "<font color='#1FCA23'>已完成</font>";                     
                        // strstatus = "";                     
                        strright = '';
                    }else{
                        strstatus = "<font color='#f00b0d'>去支付</font>";                      
                        // strstatus = '';
                    }

                    if (isNotNull(item.book)) {
                       var bookname = item.book.name;
                    }
                    if(Number(status) == 1){//已经支付
                      html += '<li><h5 style="margin:0;">'+ bookname +'</h5><div class="main_items"><span>实付款：&nbsp;￥'+ item.price +'</span></div><p>付款时间：'+ item.updated_at +'</p><div class="main-title">'+strstatus+'</div><div class="main_icon">'+strright+'</div><p><a href="#" cdata="'+item.id+'" class="button button-danger" onclick="delorder(this)">删除</a></p></li>';
                    }else{//未支付
                      html += '<li onclick="payOrder(this)" cid = "'+item.id+'" amount = "'+item.price+'" goods_name="'+bookname+'"><h5 style="margin:0;">'+ bookname +'</h5><div class="main_items"><span>实付款：&nbsp;￥'+ item.price +'</span></div><p>付款时间：'+ item.updated_at +'</p><div class="main-title">'+strstatus+'</div><div class="main_icon">'+strright+'</div><p><a href="#" cdata="'+item.id+'" class="button button-danger" onclick="delorder(this);stopDefault(event)">删除</a></p></li>';
                    }
                    

                }           
            }
         }
         $$('.list-container').html(html);


         if (lastlength < limit || datalist.length == 0) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  $('.infinite-scroll-preloader').remove();
                  isdeletebottom = true;
                  return;
          }
      }          
    }
      
  }


//阻止浏览器的默认行为 
function stopDefault( e ) {  
    e.stopPropagation()
}



  function delorder(cthis){
    var coid = $(cthis).attr("cdata");
     $.confirm('确定要删除吗', function () {
          var param = {}
          var url = 'apis/delOrder?orderid='+coid;
          net_request('get',url,param,delOrderSuccessBack,errorCallBack);
      });
  }


function delOrderSuccessBack(data){
if (isNotNull(data) && data.success) {
  $.toast("删除成功");
   offset = 0;
    getData();
}

}




  // 失败函数回调
  function errorCallBack(data){

  }



  function payOrder(cthis){
      var cid = $$(cthis).attr("cid");
      var cprice = $$(cthis).attr("amount");
      var cname = $$(cthis).attr("goods_name");

      //正在提交订单
      var param = {}
      var url = 'apis/alipay?out_trade_no='+cid+'&total_amount='+cprice+'&subject='+cname;
      net_request('post',url,param,verOrderSuccessBack,errorCallBack);
  }


function verOrderSuccessBack(data){
  //返回校验订单的信息，需要传给客户端
  // if(isNotNull(data) && data.success){
      $.toast("正在跳转支付，请稍等");

        var param = {
            type:'buybook',
            bookdata:JSON.stringify(data)
        };
        //开始请求购买图书
        send_data(param);  
  // }else{
  //   native_showtoast("支付失败");
  // }
}

//支付成功，刷新列表
function paysuccess(){
  offset = 0;
  $$('.list-container').html("");
  getData();
}

  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/

    getData();

}
    // 初始化
    $(function(){

      readclick();
      
      $.init();
    });
  </script>
</body>
</html>